<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
@txt-color:#B5BDC2;//字体颜色
	.header {
		height:60px;
		// line-height:60px;
		// width:100%;
		min-width:800px;
		background:#2A2A2A;
        z-index:5;
        position: fixed;
        width: 100%;
		.logo{
            margin-left:30px;	
            height:60px;		
			float:left;
            cursor: pointer;
            display: flex;
            align-items: center;
            .p1{
                background:url('../images/logo.png') 0 center no-repeat;
                width:93px;
                height: 34px;
            }
		}
        ul{
            display: flex;
            justify-content: center;
            li{
                width:72px;
                height: 60px;
                text-align:center;
                float:left;
                padding-top: 10px;
                color:@txt-color;
                overflow: hidden;
                font-size: 14px;
                cursor: pointer;
                p{
                    width: 20px;
                    height: 20px;
                    margin: 0 auto;
                }
                span{
                    display: inline-block;
                    line-height: 22px;
                    float: left;
                    width: 100%;
                    margin-top: 3px;
                }
                .txt{
                    background: url('../images/topnav_text.png') no-repeat;
                    background-size: 100% 100%;
                }
                .music{
                    background: url('../images/topnav_music.png') no-repeat;
                    background-size: 100% 100%;
                }
                .img{
                    background: url('../images/topnav_img.png') no-repeat;
                    background-size: 100% 100%;
                }
                .video{
                    background: url('../images/topnav_video.png') no-repeat;
                    background-size: 100% 100%;
                }
                .bg{
                    background: url('../images/topnav_background.png') no-repeat;
                    background-size: 100% 100%;
                }
                .other{
                    background: url('../images/topnav_set.png') no-repeat;
                    background-size: 100% 100%;
                }
                .publish{
                    background: url('../images/topnav_general.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
            li:hover{
                color:@primary-color;
                .txt{
                    background: url('../images/topnav_text_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                 .music{
                    background: url('../images/topnav_music_ hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                .img{
                    background: url('../images/topnav_img_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                .video{
                    background: url('../images/topnav_video_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                .bg{
                    background: url('../images/topnav_background_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                .other{
                    background: url('../images/topnav_set_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
                .publish{
                    background: url('../images/topnav_general_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
        .headerbutbox{
            float:right;
            div{
                background: #444444;
                font-size: 14px;
                color: #B4BDC1;
                width:100px;
                float:left;
                text-align:center;
                cursor: pointer;
                line-height: 60px;
                position: relative;
                margin-left: 1px;
                .bottom{
                    position: absolute;
                    bottom:0;
                    left: -1px;
                    width: 100px;
                    height: 4px;
                    background-color: #686E71;
                }
            }
            div:hover{
                color:#FE9333;
                .bottom{
                   background-image: linear-gradient(-145deg, #FFAC12 0%, #FD5286 100%);
                }
            }
            .release{
                display: flex;
                align-items: center;
                .img{
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                    margin: 0  10px 0 20px;
                    background: url('../images/topnav_release_normal.png') no-repeat;
                    background-size: 100% 100%;
                    display: inline-block;
                }
            }
            .release:hover{
                .img{
                    background: url('../images/topnav_release_hover.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
	}
    .musicModal{
        .left{
            width: 150px;
            height: 480px;
            float: left;
            .top{
                width: 100%;
                height: 410px;
                background: url(../images/musicleft.png) no-repeat;
                background-size: 100% 100%;
                overflow: hidden;
                p{
                    margin-bottom: 10px;
                }
                p:nth-child(1){
                    margin: 41px 0 10px;
                }
                .topP{
                    font-size: 14px;
                    color: #fff;
                    height: 40px;
                    line-height: 40px;
                    background-color: #686E71;
                    cursor: pointer;            
                    img{
                        vertical-align: middle;
                        margin:0 12px 0 32px;
                        width: 20px;
                        height: 20px;
                    }         
                }
                .on{
                    background-color: #4CB2EB;
                }
            }
            .btn{
                width: 100%;
                height: 71px;
                 background: url(../images/btn.png) no-repeat;
                background-size: 100% 100%;
                border-radius: 0;
                border:0;
                font-size: 16px;
                color: #fff;
                position: relative;
                .btnHover{
                    position: absolute;
                    display: none;
                    top:-123px;
                    right: -194px;
                    width: 304px;
                    height: 114.3px;
                    background: #FFFAF5;
                    border: 1px solid #FB9132;
                    padding: 14px 14px 20px 14px;
                    font-size: 12px;
                    color: #FE9333;
                    line-height: 20px;
                    text-align: justify;
                    white-space:initial;
                    z-index: 2;
                }

            }
            .btn:hover{
                .btnHover{
                    display: block;
                }
            }
            
        }
        .right{
            width: 650px;
            float: left;
            position: relative;
            .ul{
                background-color: #F6FAF9;
                width: 650px;
                height:410px;
                padding:60px 20px 20px 20px; 
                overflow: auto;
                li{
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid #E3E8EA;
                    background-color: #fff;
                    margin-bottom: 8px;
                    position: relative;
                    div.progressbg{
                        position: absolute;
                        left: 0;
                        top: 0;
                        background:#FDF7F2;
                        height:100%;
                        z-index: 1;
                    }
                    p.progressp{
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 2;
                    }
                    p{
                        margin-left: 30px;
                        max-width: 380px;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        float:left;
                    }
                    span{
                        float: right;
                        width: 20px;
                        height: 20px;
                        margin-right: 18px;
                        margin-top: 9px;
                        cursor: pointer;
                        img{
                            float: left;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .used{
                        float: left;
                        width: 48px;
                        line-height: 20px;
                        margin-left: 20px;
                        text-align: center;
                        background-image: linear-gradient(-145deg, #FFAC12 0%, #FD5286 100%);
                        border-radius: 2px;
                        font-size: 12px;
                        color:#fff;
                    }
                }
                li:hover{
                    background-color: #FFFAF6;
                    color: @primary-color;
                }
                .choose{
                    background-color: #FFFAF6;
                    color: @primary-color;
                }
            }
            
            .title{
                width: 100%;
                height: 40px;
                background-color: #E3E8EA;
                line-height: 40px;
                font-size: 14px;
                position: absolute;
                padding: 0 41px 0 30px;
                z-index:1;
                span{
                    margin-right: 8px;
                    cursor: pointer;
                }
                span:hover{
                    color: #FE9333;
                }
                .on{
                    color: #FE9333;
                }
                .input{
                    width: 200px;
                    height: 30px;
                    position: absolute;
                    right:6px;
                    top:0px;                  
                }
                .btn{
                    position: absolute;
                    right:6px;
                    top:6px;
                    height: 28px;
                    width: 30px;
                    background:url('../images/edit_search.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }
            }
            .notData{
                width: 650px;
                height: 410px;
                background-image: linear-gradient(-180deg, rgba(254,202,51,0.20) 3%, rgba(255,255,255,0.10) 100%);
                text-align: center;
                img{
                    width:400px;
                    height: 172px;
                    margin: 100px 0 36px 0;
                }
                p{
                    font-size: 16px;
                    color: #FE9333;
                    font-weight: bold;
                }
            }
        }
    }
    .otherModal{
        ul{
            overflow: hidden;
            li{
                float: left;
            }
        }
        .left{
            width: 240px;
            height: 479px;
            float: left;
            background: url('../images/element_leftside_bg2.png') no-repeat;
            background-size: 100% 100%;
            .img{
                width: 100px;
                height: 100px;
                padding: 8px;
                background-color: #fff;
                margin: 30px 70px 11px 70px;
                box-shadow: 5px 5px 6px 0 rgba(103,109,112,0.20);
                display:flex;
                justify-content: center;
                align-items: center;
                img{
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .btn{
                width: 80px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                background-color: #4CB2EB;
                color: @write-color;
                margin: 0 auto;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
            }
            .txt{
                margin-top: 16px;
                padding: 0 13px 0 15px;
                p{
                    font-size: 14px;
                    color: #686E71;
                    font-weight: bold;
                    margin-bottom: 6px;
                    span{
                        font-size: 12px;
                        font-weight: normal;
                        padding-left: 2px;
                    }
                }
                .p2{
                    margin-top: 13px;
                }
            }

        }
        .right{
            width: 560px;
            height: 480px;           
            float: left;
            .top{
                height: 413px;
                border-top: 1px solid #B5BDC2;
                border-bottom: 1px solid #E3E8EA;
                padding: 11px 20px 6px 20px;
                div{
                    border-bottom: 1px solid #E3E8EA;
                    overflow: hidden;
                    padding-top: 23px;
                    span{
                        display: block;
                        float: left;
                        font-size: 14px;
                        color:#686E71;
                        font-weight: bold;
                        margin-right: 20px;
                    }
                    ul{
                        li{
                            margin-bottom: 6px;
                            width: 78px;
                            font-size: 14px;
                            line-height: 16px;
                            height: 16px;
                            color: #686E71;
                            input{
                                width: 16px;
                                height: 16px;
                                vertical-align: middle;
                                margin-right: 8px;
                            }
                        }
                    }
                }
                .age{
                   
                   li{
                       width: 118px;
                   }
                }
            }
            .top1{
                width: 100%;
                height: 413px;
                background:url('../images/element_setweichat.png') no-repeat;
                background-size: 100% 100%;
                position: relative;
                .content1{
                    position: absolute;
                    width: 191px;
                    height: 111px;
                    top:141px;
                    left: 173px;
                    padding: 8px 12.8px 12px 12.8px;
                    font-size: 0;
                    .p1{
                        font-size: 14px;
                        color: #000000;
                        letter-spacing: 0;
                        line-height: 17px;
                        height: 34px;
                        overflow:hidden;
                        margin-bottom: 4px;
                    }
                    .img{
                        display: inline-block;
                        width: 53px;
                        height: 53px;
                        vertical-align: top;
                        margin-right: 6px;
                    }
                    .p2{
                        display: inline-block;
                        font-size: 12px;
                        color: #707070;
                        letter-spacing: 0;
                        line-height: 17px;
                        width: 106px;
                        height: 51px;
                        overflow:hidden;
                    }
                }
            }
            .bottom{
                padding-left: 30px;
                height: 70px;
                line-height: 70px;
                span{
                    color: @primary-color;
                }
            }
        }
    }
</style>
<style  lang="less">
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
    .musicModal{       
        .ivu-modal-footer{
            display: none;
        }
        .ivu-modal-body{
            padding: 0;
            overflow: hidden;
        }
        .ivu-input{
            height: 30px;
        }
       .bottom{
			border-top: 1px solid #E3E8EA;
			padding: 12px 18px 12px 18px;
			text-align: right;
            div{
                float: left;
                line-height: 30px;
                color:@primary-color;
                p{
                    float:left;
                    max-width: 350px;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    overflow:hidden;
                    text-align:left;
                }
                span{
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    vertical-align: sub;
                    cursor: pointer;
                    margin-left: 20px;
                    img{
                        float: left;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
			.cancel{
				font-size: 16px;				
			}
			.ok{
				padding: 8px 43px;
				font-size: 16px;
			}
		}
    }
    .otherModal{
        .ivu-modal-body{
            padding: 0;
            overflow: hidden;
        }
        .ivu-modal-footer{
            display: none;
        }
        .ivu-input{
            height: 30px;
        }
        textarea.ivu-input{
            resize: none;
            background: rgba(255,255,255,0.7);
            border: 0;
            font-size: 14px;
            color: #686E71;
        }
        .textarea1{
            textarea.ivu-input{
                 height: 68px;                
            }
        }
        .textarea2{
            textarea.ivu-input{
                height: 134px;
            }
        }

        .bottom{
			.cancel{
				font-size: 14px;		
                margin-left: 74px;
                margin-right: 32px;		
			}
			.ok{
				padding: 8px 43px;
				font-size: 16px;
			}
            .ivu-radio-wrapper{
                margin-right: 30px;
            }
		}
    }
    .logo{
        .ivu-tooltip-inner{
            line-height: 28px;
            background-color: #fff;
            color:#686E71;
            font-size: 14px;
            height: 22px;
            padding: 1px 10px;
            min-height:28px;
            max-width:230px;
        }
        .ivu-tooltip-popper[x-placement^="bottom"] .ivu-tooltip-arrow{
            border-bottom-color: #fff;
        }
    }
</style>
<template>
	<header class="header">
        <div class="headerbutbox clearfix">
            <div  @click="releasebtnFN(1)">预览<div class="bottom"></div></div>
            <div  @click="releasebtnFN(5)">保存<div class="bottom"></div></div>
            <div class="release" @click="releasebtnFN(2)"><div class="img"></div>发布<div class="bottom"></div></div>
            <div  @click="editModalFun">退出<div class="bottom"></div></div>
        </div>
        <Tooltip content="返回传记列表" placement="bottom-start" class="logo">
            <p class="p1" @click="editModalFun"></p>
        </Tooltip>
        <ul class="clearfix">
            <li @click="adiuomethods"><p class="music"></p><span>音乐</span></li>
            <li v-if="showtype==1||showtype==2" @click="textmethods"><p class="txt"></p><span>文本</span></li>             
            <li v-if="showtype==1||showtype==2" @click="imgphototype(2)"><p class="img"></p><span>图片</span></li>
            <!-- <li v-if="showtype==1||showtype==2" @click="myspfn(1,2)"><p class="video"></p><span>视频</span></li> -->
            <li v-if="showtype==1||showtype==2" @click="imgphototype(3)"><p class="bg"></p><span>背景</span></li>
            <li @click="templateEditqt"><p class="other"></p><span>{{accountType == 1?'其他设置':'分享设置'}}</span></li>
            <li @click="tongyongFn" v-show="accountType == 1"><p class="publish"></p><span>通用设置</span></li>
        </ul>
        <Modal v-model="modal1" title="音乐素材" @on-cancel="cannelbtn" class="musicModal" width="800">
            <div>
                <div  class="left">
                    <div class="top">
                        <p @click="adiuomethods" :class="topClass"><img src="../images/element_lefticon_upload.png"/>我的上传</p>
                        <p @click="mymusicFn" :class="topClass2"><img src="../images/element_lefticon_music.png"/>音乐库</p>
                        <p @click="LatelymusicFn" :class="topClass3"><img src="../images/element_lefticon_photocopy.png"/>最近使用</p>
                    </div>                    
                    <Upload
                    ref="uploadmymusic"
                    :on-success="handleSuccess"
                    :default-file-list="mymusic"
                    :show-upload-list="false"
                    :format="['mp3']"
                    :on-format-error="uploadPhotoError"
                    :action="global+'/music/material/upload'" 
                    :headers="tokendata" 
                    name="musicMaterialFile">
                        <Button type="ghost" class="btn">
                            上传
                            <div class="btnHover">用户使用音乐素材即遵守《星星网音乐版权许可与服务协议》，并对其自行上传的作品承担全部责任。
                            支持格式：MP3。大小无限制，但会影响打开速度。</div>
                        </Button>
                    </Upload>
                </div>
                <div class="right">
                    <div class="" v-show="rightShow"><!--我的上传-->
                        <div class="title" v-show="uploadmymusic.length != 0"></div>   
                        <ul class="ul" v-show="uploadmymusic.length != 0">
                            <li v-for="(item,index) in uploadmymusic" :class="item.isUse?'choose':''" @click="currentMusic(item)">
                                <template v-if="item.status === 'uploading'">
                                    <p class="progressp">{{item.name}}</p>
                                   <div class="progressbg" :style="{width: filterfloat(item.percentage) + '%' }"></div>
                                </template>
                                <template v-else>
                                    <p>{{item.musicName}}</p>
                                    <span @click.stop="delMusic(index,item.id,item.musicPath)"><img src="../images/element_delete.png"/></span>
                                    <span @click.stop="pauseMusic(item,item.id)" class="" v-show="isplay == item.id && isLoading != item.id"><img src='../images/element_suspend.gif' /></span> 
                                    <span class="" v-show="isLoading == item.id"><img src='../images/music_loading.gif' /></span>                                                                                                   
                                    <span @click="palyMusic(item,item.id,item.musicPathStatus)" class="" v-show="isplay != item.id && isLoading != item.id"><img src='../images/element_play.png' /></span>
                                    <span v-if="item.isUse" class="used">已设置</span>
                                </template>
                            </li>
                        </ul>
                        <div class="notData" v-show="uploadmymusic.length == 0">
                            <img  src="../images/element_nomusic.png"/>
                            <p>请上传背景音乐</p>
                        </div>
                    </div>
                    <div class="" v-show="rightShow2"><!--音乐库-->
                        <div class="title">
                            <span @click="mymusicType('','')" :class="chooseimgtype==0?'on':''">全部</span>                            
                            <span v-for="(item,index) in musictypedata" @click="mymusicType(item.code,'')" :class="item.code==chooseimgtype?'on':''">{{item.value}}</span>
                             <Input v-model="musicName" size="large" placeholder="关键字搜索" class="input"></Input>
                             <div @click.stop="mymusicType('',musicName)" class="btn"></div>
                             <!-- <Button type="primary" @click="mymusicType(musictypedataindex)" icon="ios-search" class="btn"></Button> -->
                        </div>                                          
                        <ul class="ul ul2" v-show="musicdata.length != 0">
                            <li v-for="(item,index) in musicdata"  :class="item.isUse?'choose':''" @click="currentMusic(item)">
                                <p>{{item.musicName}}</p> 
                                <span @click.stop="pauseMusic(item,item.id)" class="" v-show="isplay == item.id && isLoading != item.id"><img src='../images/element_suspend.gif' /></span> 
                                <span class="" v-show="isLoading == item.id"><img src='../images/music_loading.gif' /></span>                                
                                <span @click="palyMusic(item,item.id,item.musicPathStatus)"  v-show="isplay != item.id && isLoading != item.id"><img src='../images/element_play.png' /></span>
                                <span v-if="item.isUse" class="used">已设置</span>                                
                            </li>
                        </ul>
                        <div class="notData" v-if="musicdata.length == 0">
                            <img  src="../images/element_nomusic.png"/>
                            <p>暂无数据</p>
                        </div>
                    </div>
                    <div class="" v-show="muiscShow"><!--最近使用-->
                        <div class="title" v-show="musiclocalStorage.length != 0"></div>   
                        <ul class="ul" v-show="musiclocalStorage.length != 0">
                            <li v-for="(item,index) in musiclocalStorage" :class="item.isUse?'choose':''" @click="currentMusic(item)">
                                <p>{{item.musicName}}</p>
                                <span @click.stop="pauseMusic(item,item.id)" class="" v-show="isplay == item.id && isLoading != item.id"><img src='../images/element_suspend.gif' /></span> 
                                <span class="" v-show="isLoading == item.id"><img src='../images/music_loading.gif' /></span>                                 
                                <span @click="palyMusic(item,item.id,item.musicPathStatus)" class="" v-show="isplay != item.id && isLoading != item.id"><img src='../images/element_play.png' /></span>
                            </li>
                        </ul>
                        <div class="notData" v-show="musiclocalStorage.length == 0">
                            <img  src="../images/element_nomusic.png"/>
                            <p>请上传背景音乐</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <div v-show="currentMusicTrue"><p>已选择：{{currentMusicData.musicName}}</p> <span><img @click="delmusicFn" src='../images/leftside_delete.png' /></span></div> 
                        <Button type="text" class="cancel" @click="cannelbtn">取消</Button>
				        <Button type="warning" class="ok"  @click="audiobtn">确定</Button>
                    </div>
                </div>
                <audio src="http://test.lifebook.xin/static/music/20170518/11.mp3" ref="audiomp3" preload></audio>
            </div>
        </Modal>
        <Modal v-model="qtset" :title="accountType == 1?'其他设置':'分享设置'" class="otherModal" width="800">
            <div>
                <div class="left">
                    <div class="img">
                        <img :src="qtslperson.sharePicPathCut ? imgurl + qtslperson.sharePicPathCut : staticimg+'/images/boy-2.png'">                        
                    </div>
                    <p @click="toggleShow" class="btn">更换封面</p>                    
                    <div class="txt">
                        <p>传记标题<span>（建议25字符内）</span></p>
                        <Input v-model="qtslperson.shareTitle" type="textarea"  placeholder="请输入..." class="textarea1"></Input>
                        <p class="p2">传记描述<span>（建议50字符内）</span></p>
                        <Input v-model="qtslperson.shareContent" type="textarea"  placeholder="请输入..." class="textarea2"></Input>
                    </div>
                </div>
                <div class="right" >
                    <!--上半部-->
                    <div class="top" v-if='usertype=="1"'>
                        <div class="age">
                            <span>年龄</span>
                            <ul>
                                <li v-for="item in qtsl.ageMapList"><input type="checkbox" :value="item.code" :checked="item.checked" @change="changeitem(item)"><label>{{item.value}}</label></li>
                            </ul>
                        </div>
                        <div>
                            <span>职业</span>
                            <ul>
                                <li v-for="item in qtsl.jobMapList"><input type="checkbox" :value="item.code" :checked="item.checked" @change="changeitem(item)" ><label>{{item.value}}</label></li>
                            </ul>
                        </div>
                        <div>
                            <span>风格</span>
                            <ul>
                            <li v-for="item in qtsl.styleMapList"><input type="checkbox" :value="item.code" :checked="item.checked" @change="changeitem(item)"><label>{{item.value}}</label></li>
                            </ul>
                        </div>
                        <div>
                            <span>颜色</span>
                            <ul>
                                <li v-for="item in qtsl.colorMapList"><input type="checkbox" :value="item.code" :checked="item.checked" @change="changeitem(item)"><label>{{item.value}}</label></li>
                            </ul>
                        </div>
                    </div>
                    <div class="top1" v-if='usertype !="1"'>
                        <!--普通用户界面  -->
                        <div class="content1">
                            <p class="p1">{{qtslperson.shareTitle}}</p>
                            <img :src="qtslperson.sharePicPathCut ? imgurl + qtslperson.sharePicPathCut : staticimg+'/images/boy-2.png'" class="img"/>
                            <p class="p2">{{qtslperson.shareContent}}</p>
                        </div>
                    </div>
                    <!--下半部-->
                    <div class="bottom">
                        <span v-if='usertype=="1"'>权限：</span>
                        <Radio-group v-model="qtsl.cemetery.status" v-if='usertype=="1"'>
                            <Radio :label="0" >{{'自己可见'}}</Radio>
                            <Radio :label="2" >{{'公开'}}</Radio>
                        </Radio-group>
                        <span style="display:inline-block;width:220px;" v-if='usertype!="1"'></span>
                        <Button type="text" class="cancel" @click="qtcancel">取消</Button>
                        <Button type="warning" class="ok"  @click="qtmethod">确定</Button>
                    </div>
                    </div>
            </div>
        </Modal>
        <!-- 退出弹窗 -->
        <Modal
            width="320"
            v-model="editModal"
            :mask-closable="false">
            <p style="line-height:149px;text-align:center;font-size:16px;border-bottom: 1px solid #E3E8EA;">是否保存更改的内容</p>
            <div slot="footer">
                <Button type="text" size="large" @click.stop="editNotSave">不保存</Button>                
                <Button type="warning" size="large" @click.stop="editSaveFN">保存</Button>
            </div>
        </Modal>
        <!-- 无二维码编码 点击发布之后弹窗 -->
        <Modal
            width="320"
            v-model="publishModal"
            :mask-closable="false">
            <div style="display:table-cell;height:149px;vertical-align:middle;text-align:center;font-size:16px;border-bottom: 1px solid #E3E8EA;">
                <p style="padding:0 40px;">该传记未绑定二维码编码，不可发布，请先绑定墓碑二维码编码。</p>
            </div>
            <div slot="footer">                
                <Button type="text" size="large"><router-link to="getMbewm" target="_blank">获取二维码</router-link></Button>                
                <Button type="warning" size="large" @click.stop="publishBind">去绑定</Button>
            </div>
        </Modal>
        <!-- <my-upload field="file"
            @crop-upload-success="cropUploadSuccess"
            :crop=false
            :value=oneWay
            v-model="qtshow"
            :width="140"
            :height="140"
            :url="global+'/common/template/upload'"
            :params="params"
            :headers="tokendata"
            img-format="png"></my-upload> -->
        <!-- <v-notice></v-notice> -->
	</header>
</template>
<script>
    import { mapState } from 'vuex';
    import myUpload from 'vue-image-crop-upload/upload-2.vue';
    import global from '../config/global'
    export default {
		data() {
				return {
                    muiscShow:false,
                    staticimg:global.staticimg,
                    imgurl:global.imgurl,
                    videourl:global.videourl,
                    musicurl:global.musicurl,
                    uploadmymusic:[],
                    qtshow:false,
					login:false,
                    qtset:false,//其他设置
                    iindex:0,
                    modal1:false,
                    mymusic:[],
                    musicdata:"",
                    musictypedata:"",
                    musicName:"",
                    musictypedataindex:"",
                    currentMusicTrue:false,//是否显示当前选中音乐
                    currentMusicData:{},//当前选中的音乐
                    rightShow:true,//音乐素材,我的和音乐库切换显示
                    rightShow2:false,
                    topClass:'topP on',
                    topClass2:'topP',
                    topClass3:'topP',
                    age:"",
                    work:"",
                    typefg:"",
                    colortype:"",
                    qtsl:"",
                    qtslperson:"",
                    qtslpersondata:"",
                    picThumbnail:"",//其他设置图片-需要回传的参数
                    usertype:"",
                    cemeteryId2:[],
                    templateid2:[],
                    isplay:-1,
                    isLoading:-1,
                    chooseimgtype:0,
                    editModal:false,
                    publishModal:false,
				}
            },
        props: ['tokendata','musiclocalStorage','savetemplateFn','saveperson','global','templateid','cemeteryId','imgphototype','myspfn','textflag','showtype','caogaoflag','doubleid','myspdataindex','tongyongFn','accountType','musicNameIsUse','musicIdIsUse','qrCode'],
        computed: mapState({ user: state => state.user }),
        components: {
            'my-upload': myUpload
        },
        created(){
            this.reder()
        },
        watch:{
            "doubleid":"doubleidFN",
        },
        beforeUpdate(){
           this.uploadmymusic= this.$refs.uploadmymusic.fileList;
        },
		methods:{
            
            reder(){

                // 关闭提示语问题
                /*
                this.$Notice.close('memoir');
                this.$Notice.close('activity');
                this.$Notice.close('system');
                */
                this.global=global.host;
                this.$emit("adiuoFn","adiuomethods");
            },
            doubleidFN(value){
                if(value != undefined){
                    var arr = new Array();
                    var arr2 = new Array();
                    for(var i=0;i<value.length;i++){
                        arr.push(value[i].cemeteryId);
                        arr2.push(value[i].templateId);
                    }
                    this.templateid2 = arr2.join(',');
                    this.cemeteryId2 = arr.join(',');
                }              
            },
			loginbtn(){
				this.login=true;
			},
            textmethods(){
                if(this.showtype==1||this.showtype==2){
                    this.iindex++
                    this.$emit("oktext",true);                
                }
                return false;                
            },
            releasebtnFN(obj){
                this.$emit("releasebtnFN",this.releasebtn,obj)
            },
            adiuomethods(){
                    this.modal1=true;
                    this.rightShow = true;
                    this.rightShow2 = false;
                    this.muiscShow=false;
                    this.topClass = 'topP on';
                    this.topClass2 = 'topP';
                    this.topClass3 = 'topP';
                    this.isplay=-1;
                    //判断是否有已经选择的音乐                   
                    if(this.musicNameIsUse){
                        this.currentMusicTrue = true;
                        this.currentMusicData.musicName = this.musicNameIsUse;
                        this.currentMusicData.id = this.musicIdIsUse;
                        console.log('已经有选择的音乐');
                    }else{
                        this.currentMusicTrue = false;
                        console.log('无已选择的音乐');
                    }
                    this.$http.get(global.host+"/music/material/query/account?startPage=1&pageSize=100&cemeteryId="+this.cemeteryId,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            this.mymusic=response.body.result
                        })
                        .catch(function (response) {
                        })
                return false;
                
            },
            mymusicFn(){
                this.modal1=true;
                this.rightShow = false;
                this.rightShow2 = true;
                this.muiscShow=false;
                this.topClass = 'topP';
                this.topClass2 = 'topP on',
                this.topClass3 = 'topP',
                this.chooseimgtype=0;
                this.$http.get(global.host+"/music/material/query?startPage=1&pageSize=100&cemeteryId="+this.cemeteryId,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        this.musicdata=response.body.result
                    })
                    .catch(function (response) {
                    })
                this.$http.get(global.host+"/common/master/data/query?masterDataType=14",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        this.musictypedata=response.body.result
                    })
                    .catch(function (response) {
                })
            },
            LatelymusicFn(){
                this.modal1=true;
                this.rightShow = false;
                this.rightShow2 = false;
                this.muiscShow=true;
                this.topClass = 'topP';
                this.topClass2 = 'topP';
                this.topClass3 = 'topP on';
                this.$emit("musiclocalStorageFn",true);                
            },
            mymusicType(index,name){               
                this.chooseimgtype = index;
                this.$http.get(global.host+"/music/material/query?startPage=1&pageSize=100&musicType="+index+"&musicName="+name+"&cemeteryId="+this.cemeteryId,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.musicdata=response.body.result
                })
                .catch(function (response) {
                })
            },
            currentMusic(name){
                this.currentMusicTrue=true;     
                console.log(name);          
                this.currentMusicData=name;
            },
            delmusicFn(){
                this.currentMusicTrue=false;
                this.currentMusicData={};
                this.isplay=-1;
                this.$refs.audiomp3.pause();
            },
            palyMusic(obj,index,flag){
                //播放音乐
                var a;
                if(flag=="1"){
                    a=global.musicurl
                }
                else{
                    a=global.imgurl
                }
                this.isplay = -1;
                this.isLoading = index;
                if(this.$refs.audiomp3.src != a+obj.musicPath){
                    console.log(a+obj.musicPath);
                    this.$refs.audiomp3.setAttribute("src",a+obj.musicPath);   
                    var this_ = this;
                    this.$refs.audiomp3.addEventListener("canplaythrough",
                    function() {
                        console.log('加载完成');
                        this_.isLoading = -1;
                        this_.isplay = index;                
                        this_.$refs.audiomp3.play();
                    },false);              
                }else{
                    console.log('直接播放');
                    this.isLoading = -1;
                    this.isplay = index;                
                    this.$refs.audiomp3.play();
                }
                
                
            },
            pauseMusic(){
                console.log('暂停')
                this.$refs.audiomp3.pause();
                this.isplay = -1;
            },
            delMusic(index,id,url){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个音乐么？</p>",
                    onOk: () => {
                        this.$http.get(global.host+"/music/material/delete?musicIds="+id,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            console.log(this.currentMusicData);
                            
                            if(!this.currentMusicTrue){
                                //
                                this.musicNameIsUse ="";                   
                            }
                            this.adiuomethods();
                            // this.mymusic.splice(index,1);
                            if(this.currentMusicData.id == id){
                                console.log('删除是已设置的'); 
                                this.currentMusicTrue =false;
                                this.currentMusicData = {};
                            }
                            if(this.$refs.audiomp3.src == this.musicurl+url){
                                    console.log('删除的是正在播放的');  
                                    this.$refs.audiomp3.pause();   
                                    this.$refs.audiomp3.src = '';
                                    this.isplay = -1;
                                    this.delmusicFn();
                            }       
                            this.$emit("musicNameFN",this.currentMusicData);
                                            
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });                
            },
            filterfloat(obj){
                    return parseInt(obj);
            },
            cannelbtn(){
                this.currentMusicTrue = false;
                this.modal1=false;
                this.$refs.audiomp3.pause();
                
            },
            handleSuccess(res, file){
                file.accountId=file.response.musicMaterial.accountId;
                file.createTime=file.response.musicMaterial.createTime;
                file.id=file.response.musicMaterial.id;
                file.isSystem=file.response.musicMaterial.isSystem;
                file.musicName=file.response.musicMaterial.musicName;
                file.musicPath=file.response.musicMaterial.musicPath;
                /*如果上传之后 已选择的音乐为空 修改使用状态为false*/
                if(!this.currentMusicTrue){
                    this.musicNameIsUse ="";                   
                }
                /*刷新音乐列表*/
                this.adiuomethods();
            },
            templateEditqt(){
                this.qtset=true
                this.$http.get(global.host+"/cemetery/template/show/query/one?id="+this.$route.query.mid+"&templateId="+this.$route.query.nid,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        this.qtsl=response.body;
                        this.qtslperson=response.body.cemetery;
                        this.usertype=response.body.accountType
                    })
                    .catch(function (response) {
                })
                return false;               
            },
            toggleShow(){
                this.$emit("qtsetFlg",true); 
                //this.qtshow=true;
            },
            cropUploadSuccess(jsonData, field){
                this.picThumbnail = jsonData.picThumbnail;
                this.qtslperson.sharePicPathCut=jsonData.picSource;
                this.qtslpersondata=jsonData.picSource;
            },
            qtcancel(){
                this.qtset=false;
            },
            qtmethod(){
                var ageMapListid="";
                var jobMapListid="";
                var styleMapListid="";
                var colorMapListid="";
                var jobMapListidName="";
                var styleMapListidName="";
                var colorMapListidName="";
                if(this.qtsl.ageMapList != undefined){
                    for(var i=0;i<this.qtsl.ageMapList.length;i++){
                    if(this.qtsl.ageMapList[i].checked==true){
                        ageMapListid+=this.qtsl.ageMapList[i].code+","
                        }
                    }
                    for(var i=0;i<this.qtsl.jobMapList.length;i++){
                        if(this.qtsl.jobMapList[i].checked==true){
                            jobMapListid+=this.qtsl.jobMapList[i].code+",";
                            jobMapListidName+=this.qtsl.jobMapList[i].value;                            
                        }
                    }
                    for(var i=0;i<this.qtsl.styleMapList.length;i++){
                        if(this.qtsl.styleMapList[i].checked==true){
                            styleMapListid+=this.qtsl.styleMapList[i].code+",";
                            styleMapListidName+=this.qtsl.styleMapList[i].value; 
                        }
                    }
                    for(var i=0;i<this.qtsl.colorMapList.length;i++){
                        if(this.qtsl.colorMapList[i].checked==true){
                            colorMapListid+=this.qtsl.colorMapList[i].code+",";
                            colorMapListidName+=this.qtsl.colorMapList[i].value; 
                        }
                    }
                }
                this.$http.post(global.host+"/common/template/update",{"status":(this.qtsl.cemetery.status==undefined?0:this.qtsl.cemetery.status),"cemeteryId":this.$route.query.mid,"id":this.$route.query.nid,"picSource":this.qtslperson.sharePicPathCut,"picThumbnail":this.picThumbnail,"title":this.qtslperson.shareTitle,"description":this.qtslperson.shareContent,"colorType":colorMapListid,"ageType":ageMapListid,"jobType":jobMapListid,"type":styleMapListid,"jobTypeName":jobMapListidName,"typeName":styleMapListidName,"colorTypeName":colorMapListidName},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.status == 1){
                        this.qtset=false;                        
                    }else{
                        this.$Message.error(response.body.message);
                    }
                })
                .catch(function (response) {
                })
            },
            changeitem(item){
                item.checked=!item.checked
            },
            releasebtn(obj){
                if(obj == 5){//点击保存按钮
                    this.$loading.show(); 
                    this.$http.post(global.host+"/cemeteryOwner/lifebook/publish",{"status":obj,"template":this.templateid2,"cemeteryId":this.cemeteryId2},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {                            
                        if(response.body.status == 1 ){
                            this.$loading.hide(); 
                            this.$Message.success("保存草稿箱成功")
                        }else{
                            this.$loading.hide();
                            this.$Message.error(response.body.messgae);
                        }                       
                    })
                    .catch(function (response) {
                    })
                    return;                
                }else if(obj==1){
                    this.$emit("previewFN",true);
                    return;            
                }
                else if(obj==2){
                    if(this.qrCode){
                        this.$Modal.confirm({
                            width:"320",
                            content: "<p>发布后该人物传记将进入审核阶段，我们会在工作日24小时内完成审核，您可以通过临时二维码预览您的人物传记，确认发布？</p>",
                            onOk: () => {
                                this.$http.post(global.host+"/cemeteryOwner/lifebook/publish",{"status":obj,"template":this.templateid2,"cemeteryId":this.cemeteryId2},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                                .then((response) => {                            
                                    if(response.body.status == 1 && obj == 2){
                                        this.$router.push({ path: '/publish',query:{"cemeteryId":this.cemeteryId,"template":this.templateid}});//跳转传记页面
                                    }else{
                                        this.$Message.error(response.body.message)
                                    }
                                    
                                })
                                .catch(function (response) {
                                })                 
                            },
                            onCancel: () => {
                            }
                        });
                    }else{
                        console.log('无二维码');
                        this.publishModal = true;
                    }                    
                }
                
            },
            publishBind(){//点击绑定二维码
                //先保存数据到草稿箱        
                this.$http.post(global.host+"/cemeteryOwner/lifebook/publish",{"status":5,"template":this.templateid2,"cemeteryId":this.cemeteryId2},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {              
                    //跳转到个人中心页面-传记信息页面 usercenterZj
                    this.$router.push({ path: '/usercenterZj'});//跳转传记页面
                })
                .catch(function (response) {
                })   
            },
            editModalFun(){
                this.editModal = true;
            },
            editSaveFN(){
                this.$emit("releasebtnFN",this.editSave,5)
            },
            editSave(){
                this.$loading.show(); 
                this.$http.post(global.host+"/cemeteryOwner/lifebook/publish",{"status":5,"template":this.templateid2,"cemeteryId":this.cemeteryId2},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        //this.musictypedata=response.body.result                        
                        if(response.body.status == 1){
                            this.$router.push({ path: '/home'});//跳转传记页面
                            this.$loading.hide(); 
                        }else{
                            //this.$router.push({ path: '/home'});
                            // this.$Message.success("保存成功");
                        }                       
                    })
                    .catch(function (response) {
                })     
            },
            editNotSave(){
                this.editSave()
                //this.$router.push({ path: '/home'});//跳转传记页面
            },
            audiobtn(){
                var id=this.currentMusicData.id?this.currentMusicData.id:""
                var data=this.currentMusicData.musicPath?this.currentMusicData.musicPath:""
                this.$http.post(global.host+"/music/material/use",{"musicId":id,"musicPath":data,"cemeteryId":this.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        this.modal1=false;
                        this.$refs.audiomp3.pause();
                        if(id!=""){
                            this.$emit("musicNameFN",this.currentMusicData);
                        }else{
                            this.currentMusicData={};
                            this.$emit("musicNameFN",this.currentMusicData);
                        }                        
                    })
                    .catch(function (response) {
                })
            },

            backHome(){
                 this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定离开编辑页面么？</p>",
                    onOk: () => {
                        this.$router.push({ path: '/home'});//跳转传记页面
                    },
                    onCancel: () => {
                    }
                });
                 
            },
            uploadPhotoError(file){
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传MP3格式的音乐。'
                });
            }
            

		}
    }
</script>